<template>
  <div>
    <el-table title="教师已有课程"
              ref="courseTable" :data="courseData" border stripe style="width: fit-content; margin-left: 10px">
      <el-table-column
          prop="id"
          label="课程id"
          width="80">
      </el-table-column>
        <el-table-column
                prop="semester"
                label="开课学期"
                width="140">
        </el-table-column>
      <el-table-column
          prop="courseId"
          label="课程编号"
          width="140">
      </el-table-column>
      <el-table-column
          prop="courseName"
          label="课程名称"
          width="140">
      </el-table-column>
      <el-table-column
          prop="schoolName"
          label="授课学院"
          width="80">
      </el-table-column>
      <el-table-column
          prop="major"
          label="授课专业"
          width="80">
      </el-table-column>
      <el-table-column
          prop="credit"
          label="学分"
          width="80">
      </el-table-column>
      <el-table-column
          prop="hour"
          label="学时"
          width="80">
      </el-table-column>
      <el-table-column
          prop="time"
          label="上课时间"
          width="80">
      </el-table-column>
      <el-table-column
          prop="location"
          label="上课地点"
          width="80">
      </el-table-column>
      <el-table-column
          prop="teacher"
          label="教师"
          width="80">
      </el-table-column>
      <el-table-column
          prop="teacherId"
          label="教师id"
          width="80">
      </el-table-column>
      <el-table-column
          prop="volume"
          label="选课容量"
          width=80>
      </el-table-column>
      <el-table-column
          prop="intro"
          label="课程简介"
          width="140">
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="getMemberList(scope.row.courseId)" type="text" size="small">查看选课名单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--选课名单弹窗-->
    <el-dialog title="选课名单" :visible.sync="memberListVisible" @closed="resetmemberListTable('memberListTable')" width="600px">
      <el-table title=""
                ref="memberListTable"
                :data="memberListData"
                border stripe style="width: fit-content; margin-left: 10px"
      >
        <el-table-column
             prop="username"
             label="学号"
             width="80">
        </el-table-column>
        <el-table-column
            prop="name"
            label="学生姓名"
            width="100">
        </el-table-column>
<!--        <el-table-column-->
<!--            prop="grade"-->
<!--            label="年级"-->
<!--            width="140">-->
<!--        </el-table-column>-->
        <el-table-column
            prop="collegeName"
            label="所属院系"
            width="100">
        </el-table-column>
        <el-table-column
            prop="majorName"
            label="所属专业"
            width="120">
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "TeaCourseInfo",
  data(){
    return{
      userInfo:{},
      courseData:[],
      memberListData:[],

      memberListVisible: false,
    }
  },
  created() {
    // this.getUserInfo();
    this.getTeaCourseList();
  },
  methods:{
    // // 获取用户信息
    // getUserInfo() {
    //   this.$axios.get("/sys/userInfo").then(res => {
    //     this.userInfo = res.data.data.name;
    //   })
    // },
    //获得教师已有列表
    getTeaCourseList(){
      this.$axios.get("/sys/userInfo").then(res1 => {
        this.userInfo = res1.data.data;
        this.$axios.post("/sys/course/list/teacher",{teacherId:this.userInfo.username}).then(res => {
          var newData=[]
          console.log("msg:",res.data.data);
          for (var i=0;i<res.data.data.length;i++) {
            var data={}
            var mapTime=[],mapSemester=[],mapLocation=[],mapMajor=[]
            data.id = res.data.data[i].id

            for (var key in res.data.data[i].semester){
              mapSemester.push(res.data.data[i].semester[key])
              mapSemester.push(',')
            }
            mapSemester.pop()
            data.semester=mapSemester

            data.courseId = res.data.data[i].courseId
            data.courseName = res.data.data[i].courseName
            if(res.data.data[i].type===0){
              data.type='通选课程'
            }
            else {
              if (res.data.data[i].type===1)
                data.type='专选课程'
            }

            //得到数据时直接得到schoolName
            data.schoolName = res.data.data[i].schoolName

            for (var key in res.data.data[i].major){
              mapMajor.push(res.data.data[i].major[key])
              mapMajor.push(',')
            }
            mapMajor.pop()
            data.major = mapMajor

            data.credit = res.data.data[i].credit
            data.hour = res.data.data[i].hour

            for (var key in res.data.data[i].time){
              mapTime.push(res.data.data[i].time[key])
              mapTime.push(',')
            }
            mapTime.pop()
            data.time=mapTime

            // for (var key in res.data.data[i].location){
            //     mapLocation.push(res.data.data[i].location[key])
            //     mapLocation.push(',')
            // }
            // mapLocation.pop()
            // data.location = mapLocation
            if (res.data.data[i].location!==null) {
              data.location = res.data.data[i].location.courseLocation
            }

            data.teacher = res.data.data[i].teacher
            data.teacherId = res.data.data[i].teacherId
            data.intro = res.data.data[i].intro
            data.volume = res.data.data[i].volume
            data.currentNum = res.data.data[i].currentNum

            newData.push(data)
            console.log("教师课程信息",data);
          }
          this.courseData=newData
        })
      })
      },
    //查看某一课程选课名单
    getMemberList(courseId){
      this.$axios.post('/sys/course/memberList?',{courseId:courseId}).then(res => {
        this.memberListData = res.data.data.sysUsers;
        this.memberListVisible = true;
      })
    },

      resetmemberListTable(tableName){
          this.$refs[tableName].resetFields();
          this.memberListData=[]
          this.memberListVisible=false
      },
  }
}
</script>

<style scoped>

</style>